<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="setpassword-home">
        <div v-if="showStemp == 0">
          <div class="font1">验证码已通过短信发送至</div>
          <div class="font2">+86 {{starPhone(phone)}}</div>
          <div class="font3">请输入验证码</div>
          <div id="setpassword-vant">
            <!-- 密码输入框 -->
            <van-password-input
            :value="phoneCode"
            :mask="false"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard
            :show="showKeyboard"
            @input="onInput"
            @delete="onDelete"
            @blur="showKeyboard = false"
            />
          </div>
          <div v-if="againCode" style="float: right;margin-top: 18px;font-size: 12px;">
            <span style="font-family: axis;color: #6E59FF;">{{codeNum}}</span>
            S再次发送
          </div>
          <div v-else style="float: right;margin-top: 18px;font-size: 12px;color: #6E59FF;">再次发送</div>
        </div>
        <div v-if="showStemp == 1">
          <div style="color: #fff;font-size: 16px;margin-top:25px;">{{list[showPasswordType].name}}</div>
          <div style="position: relative;">
              <input @focus="utils.blursCli" class="inputSty" style="font-size: 18px;" v-model="passwordNum" type="password" :placeholder="list[showPasswordType].place">
          </div>
          <div style="color: #fff;font-size: 16px;margin-top:25px;">确认密码</div>
          <div style="position: relative;">
              <input @focus="utils.blursCli" class="inputSty" style="font-size: 18px;" v-model="passwordAgainNum" type="password" placeholder="请再次确认密码">
          </div>
        </div>
      </div>
      <div class="setpassword-btn" @click="jumpTake">
        <span v-if="showStemp == 1">下一步</span>
        <span v-if="showStemp == 0">提交</span>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  import { PasswordInput, NumberKeyboard,Toast } from 'vant'
  export default {
    name: 'setPassword',
    data () {
      return {
        title:'修改交易密码',
        showPasswordType:0,
        showStemp:1,
        phoneCode:'',
        showKeyboard:false,
        codeNum:120,
        againCode:true,
        list:[
          {name:'登录密码',place:'请输入登录密码'},
          {name:'交易密码',place:'请输入交易密码'},
        ],
        passwordNum:'',
        passwordAgainNum:'',
        exchangePwd:'',
        phone:''
      }
    },  
    components:{
      native,
      [PasswordInput.name]:PasswordInput,
      [NumberKeyboard.name]:NumberKeyboard
    },
    computed: {
      
    },
    mounted() {
      this.showPasswordType = this.$route.params.id;
      this.exchangePwd = localStorage.getItem('exchangePwd');
      this.phone = localStorage.getItem('phone');
      if(this.exchangePwd == 'null'){
        this.title="设置交易密码"
      }
    },
    methods: {
      //手机号后四位变星号
      starPhone(phoneNum) {
          let str = String(phoneNum),
              strLen = str.slice(-7, -3);
          return str.replace(strLen, "****");
      },
      onInput(key) {
        this.phoneCode = (this.phoneCode + key).slice(0, 6);
      },
      onDelete() {
        this.phoneCode = this.phoneCode.slice(0, this.phoneCode.length - 1);
      },
      codeNumInit(num){
        if(num == 0){
          var type='EDIT_LOGIN_PWD';
        }else{
          var type='EDIT_EXCHANGE_PWD';
        }
        this.$http.post(this.utils.config+"/gz/pub/send_code?phone="+this.phone+"&type="+type).then((data)=>{})
        let setIn = setInterval(()=>{
          this.codeNum--;
          if(this.codeNum == 0){
            this.againCode = false;
            clearInterval(setIn);
          }
        },1000);
      },
      jumpTake(){
        if(this.showStemp == 0){
          if(this.phoneCode.length != 6){
            Toast('请输入验证码！');
          }      
          if(this.showPasswordType == 0){
            this.$http.post(this.utils.config+'/gz/member/edit_login_password',{loginPwd:this.$md5(this.passwordNum),code:this.phoneCode}).then((data)=>{
              Toast(data.data.msg);
              if(data.data.success){
                this.$router.go(-1);
              }
            })
          }
          if(this.showPasswordType == 1){
            this.$http.post(this.utils.config+'/gz/member/set_exchange_password',{exchangePwd:this.$md5(this.passwordNum),code:this.phoneCode}).then((data)=>{
              Toast(data.data.msg);
              if(data.data.success){
                this.$router.go(-1);
                localStorage.setItem('exchangePwd',this.$md5(this.passwordNum))
              }
            })
          }
        }else{          
          if(this.passwordNum !== this.passwordAgainNum){
            Toast('两次密码输入不一致！');
            return;
          }
          if(this.showPasswordType == 0){
            var type='EDIT_LOGIN_PWD';
            if(!this.passwordNum){
              Toast('密码不能为空！');
              return;
            }
          }
          if(this.showPasswordType == 1){
            var type='EDIT_EXCHANGE_PWD';
            if(this.passwordNum.length != 6){
              Toast('交易密码为6位数字！');
              return;
            }
          }
          this.showStemp = 0;
          this.codeNumInit(this.showPasswordType);
          // this.$http.post(this.utils.config+'/gz/pub/valid_code?phone='+this.phone+'&type='+type+'&code='+this.phoneCode).then((data)=>{
          //   if(data.data.success){
          //     this.showStemp = 0;
          //   }else{
          //     Toast(data.data.msg);
          //   }             
          // })
          // this.$http.post(this.utils.config+'/gz/member/set_exchange_password',{exchangePwd:this.$md5(this.passwordNum)}).then((data)=>{
          //     Toast(data.data.msg);
          //     if(data.data.success){
          //       this.$router.go(-1);
          //       if(this.showPasswordType == 1){
          //         localStorage.setItem('exchangePwd',this.$md5(this.passwordNum))
          //       }
          //     }
          // })
        }
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .setpassword-home{
      padding:21px;
      .font1{
        text-align: center;
        font-size:18px;
        color:rgba(255, 255, 255, .8);
        margin: 40px 0px 15px 0px;
      }
      .font2{
        text-align: center;
        font-size:14px;
        font-family:axis;
        font-weight:bold;
        color:#6E59FF;
        margin-bottom: 46px;
      }
      .font3{
        text-align: center;
        font-size:16px;
        color:rgba(255, 255, 255, .6);
        margin-bottom: 15px;
      }
    }
    .setpassword-btn{
      position: fixed;
      bottom: 0px;
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      margin-left: 15px;
      margin-bottom: 10px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
    }
    .van-number-keyboard{
      background-color: rgba(0,0,0,1);
    }
    #setpassword-vant /deep/ .van-key{
      background-color: rgba(255, 255, 255, 0.3)!important;
    }
    #setpassword-vant /deep/ .van-password-input__security li{
      background-color: #1E1F24;
      color: #fff;
      border: none;
      margin: 0px 5px;
    }
    #setpassword-vant /deep/ [class*=van-hairline]::after{
      content: normal;
    }
    #setpassword-vant /deep/ .van-password-input__security{
      height: 40px;
    }
  </style>
